// 如果项目中根目录 (和 package.json 同级的) 中存在这个文件，那么它会被 @vue/cli-service 自动加载。

const { defineConfig } = require("@vue/cli-service");
const CompressionPlugin = require("compression-webpack-plugin");

const path = require("path");
const ElementPlus = require("unplugin-element-plus/webpack");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = defineConfig({
  // 打包目录，即输出文件目录
  outputDir: "dist",

  // 打包后静态资源的目录
  assetsDir: "static",
  indexPath: "index.html",

  // 打包路径。注意各环境下需要配成绝对路径'/',  否则刷新页面会白屏。
  publicPath: "/",

  // 是否在保存的时候使用 `eslint-loader` 进行检查
  lintOnSave: false,

  // 生产环境是否生成 sourceMap 文件。设为 false 既可以减少包大小，也可以加密源码
  productionSourceMap: false,

  // Webpack相关配置。vue-cli内部用的就是webpack，configureWebpack的配置会被webpack-merge合并到最终的webpack配置中
  // configureWebpack 有两种类型形态(object 和 function)，不能重复使⽤
  configureWebpack: {
    plugins: [ElementPlus()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"), //设置绝对路径
      },
    },
    module: {
      rules: [
        {
          /* 不建议svg格式转为base64，可能会更大。
          注意:
          此处的目的在于，将小于10kb的图片，进行base64转换，减少http请求。
          但大于10kb的图片不会转换，会被copy到name中的路径下。
          由于name中会对图片名称进行hash处理，所以大于10kb的图片，不要使用中文命名。会出现乱码，导致线上环境图片无法显示。
          */
          test: /\.(png|jpe?g|gif)$/i,
          exclude: /node_modules/,
          type: "javascript/auto",
          use: [
            {
              loader: "url-loader",
              options: {
                esModule: false, // 不转换esm规范
                name: "assets/iconImg/[name].[hash:3].[ext]", // 此配置，会将图片copy到 dist/assets/iconImg/ 目录下
                limit: 1024 * 10, // 10kb以内的图片进行base64转换
              },
            },
          ],
        },
        // {
        //   test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        //   exclude: /node_modules/,
        //   use: [
        //     {
        //       loader: "url-loader",
        //       options: {
        //         limit: 10240, // 10kb以内的字体进行base64转换
        //         name: "assets/fonts/[name].[ext]",
        //       },
        //     },
        //   ],
        // },
      ],
    },
  },
  chainWebpack(config) {
    //配置 svg-sprite-loader
    // 第一步：让其他svg loader不要对src/icons进行操作
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons/svg")) //注意：路径要具体到存放的svg的路径下，不然会报错
      .end();

    // 第二步：使用svg-sprite-loader 对 src/icons下的svg进行操作
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons/svg")) //注意：路径要具体到存放的svg的路径下，不然会报错
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      //定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名">
      .options({
        symbolId: "icon-[name]",
      })
      .end();

    /*
    vue-cli脚手架默认的webpack配置了url-loader。
    直接在chainWebpack中修改默认配置，图片无法显示。需要在configureWebpack中进行配置。
    这里需要获取默认处理images的loader，并清除配置，否则configureWebpack中的配置不生效。
    */
    const imgAllLoader = config.module.rule("images");
    imgAllLoader.uses.clear();

    if (process.env.NODE_ENV === "production") {
      // 生产环境的一些优化操作：
      // 为⽣产环境修改配置
      // config.mode = "production";

      // 生产环境忽略打包的文件配置相关。忽略的文件将自动从public的index.html中找
      config.plugin("html").tap((args) => {
        args[0].isProd = true;
        return args;
      });
      var externals = {
        vue: "Vue",
        "vue-router": "VueRouter",
        vuex: "Vuex",
        axios: "axios",
      };
      config.externals(externals);

      // 打包后对过大文件进行 gzip 压缩，提升页面加载速度
      config
        .plugin("compression-plugin")
        .use(CompressionPlugin)
        .tap((options) => {
          options.test = /\.js$|\.html$|\.css/;
          options.threshold = 10240; // 小于10KB就不进行压缩
          options.minRatio = 0.8;
          options.deleteOriginalAssets = false; // 不删除源文件
          return options;
        });

      // 删除console和debugger。开发阶段可不用，上线时使用。
      config.optimization
        .minimize(true)
        .minimizer("terser")
        .tap((args) => {
          let { terserOptions } = args[0];
          terserOptions.compress.drop_console = true;
          terserOptions.compress.drop_debugger = true;
          return args;
        });
    } else {
      // 为其他环境修改配置...
      // config.mode = "development"
      config.plugin("html").tap((args) => {
        args[0].isProd = false;
        return args;
      });
    }
  },
  // 配置scss文件全局变量
  css: {
    loaderOptions: {
      // 没有分号会报错
      sass: {
        prependData: `@import "@/common/styles/base.scss";`,
      },
    },
  },
  // 如果前端应用和后端 API 服务器没有运行在同一个主机上，
  // 在开发环境下将 API 请求代理到 API 服务器
  devServer: {
    port: 8080, // devServer服务监听的端口，默认使用 8080 端口，可自行修改。
    client: {
      overlay: false,
    },
    proxy: {
      // 同后端请求格式约定：192.168.3.24:7000/api/ + 接口文档端口后的地址
      // 故此处设置：所有以 /baseApi 为前缀的请求将被代理到 http://192.168.3.24:7000/api/
      "/baseApi": {
        // target: 'http://192.168.5.53:7000/api/',
        // target: 'http://192.168.5.43:7000/api/',
        // target: "http://192.168.5.87:7000/api/",
        // target: "http://192.168.5.69:7000/api/",
        // target: "http://192.168.0.37:13005/api/",
        // target: "http://192.168.3.24:7000/api/",
        // target: 'http://116.169.61.207:13005/api',
        // target: 'http://116.169.61.207:13002/api/',
        target: 'http://182.148.53.132:21002/api/',
        // target: 'http://182.148.53.132:13002/api/',
        // target: 'http://192.168.0.88:7000/api/',
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          "^/baseApi": "",
        },
      },
      // 大屏接口
      "/screenApi": {
        // target: "http://116.169.61.207:15115/",
        target: "http://116.169.61.207:15115",
        changeOrigin: true,
        pathRewrite: {
          //路径重置
          "^/screenApi": "",
        },
      },
    },
  },
});
